<template>
  <a-modal
  ref="subTableModel"
    :title="''"
    width="100%"
    :visible="visible"
    :closable="false"
    :footer="null"
    @cancel="close"
  >


    <!-- 表头信息 -->
    <div>
      <a-row>
        <a-col :span="12">
          姓名：<b>{{ list.name }}</b>
        </a-col>
        <a-col :span="12" style="text-align: right">
          {{ list.buyTime }}
        </a-col>
      </a-row>
    </div>

    <!-- 商品列表 -->
    <a-table
      :loading="loading"
      :size="tableSize"
      rowKey="id"
      :columns="columns"
      :data-source="list.dxmChukuDetailList"
      :pagination="false"
      :bordered="true"
    >
      <template slot="footer">
        <a-row type="flex" justify="start">
          <a-col :span="24">
            <b>应收：{{ totalAmount }}</b>
          </a-col>
        </a-row>
      </template>
      <template slot="footer">
        <a-row type="flex" justify="start">
          <a-col :span="24">
            <b>实收：{{ list.shishou }}</b>
          </a-col>
        </a-row>
      </template>
    </a-table>

  </a-modal>
</template>

<script>
import { tableMixin } from '@/store/table-mixin'

export default {
  name: 'PrintSubTable',
  mixins: [tableMixin],
  props: {
    list: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      columns: [
        {
          title: '商品名称',
          dataIndex: 'goodsname',
          ellipsis: true,
          align: 'left',
          width:'50%'
        },
        {
          title: '数量',
          dataIndex: 'num',
          ellipsis: true,
          align: 'left',
          width:'15%'
        },
        {
          title: '单价',
          dataIndex: 'price',
          ellipsis: true,
          align: 'left'
        },
        {
          title: '金额',
          dataIndex: 'allprice',
          ellipsis: true,
          align: 'left'
        }
      ]
    }
  },
  computed: {
    totalAmount() {
      if(this.list.dxmChukuDetailList){
        return this.list.dxmChukuDetailList.reduce((acc, item) => acc + parseFloat(item.allprice || 0), 0).toFixed(2);
      }else{
        return 0
      }
     
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  }
}
</script>
